<template>
  <div class="auto">
    <validator name='v'>
      <form novalidate class="form-horizontal">
      <!-- <p class="bg-info text-center" style="padding: 8px;">收费信息</p> -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">收费信息</a></li>
      </ul>
      <div class="row" style="margin-top:10px;">
        <div id="unit" class="col-sm-3 form-input-group">
            <label for="f_payment" class="control-label">付款方式:</label>
              <v-select id="f_payment"
              v-model="model.f_payment"
              placeholder='请选择'
              :value.sync="model.f_payment"
              :options='paytype'
              close-on-select clear-button>
            </v-select>
          </div>
        <div>
          <label for="f_pregas" class=" col-sm-2 control-label">超用气量:</label>
          <div class="col-sm-2">
            <input  class="form-control" type="number" v-model="model.f_pregas" @blur="overusegas()" v-scale = "[model.f_pregas, 2]" disabled>
          </div>
        </div>
        <label for="f_preamount" class=" col-sm-2 control-label">超用金额:</label>
        <span class="col-sm-2 form-control-static">{{model.f_preamount.toFixed(2)}}</span>
      </div>
      <div class="row" style="margin-top:10px;">
        <print-style :print.sync='model.f_print'></print-style>
        <!-- <label for="f_balance" class=" col-sm-2 control-label">上期结余:</label>
        <span class="col-sm-2 form-control-static">{{model.f_balance.toFixed(2)}}</span> -->
        <label for="f_totalcost" class=" col-sm-2 control-label">应交金额:</label>
        <span class="col-sm-2 form-control-static">{{model.f_totalcost.toFixed(2)}}</span>
      </div>
      <div class="row" style="margin-top:10px;">
        <!-- <label for="f_curbalance" class="col-sm-6 control-label">本期结余:</label>
        <span class="col-sm-2 form-control-static">{{curbalance.toFixed(2)}}</span> -->
        <div  :class="[$v.f_collection.required ? 'has-error' : 'has-success']">
          <label for="f_collection" style="width:12%" class="col-sm-1 control-label">收款:</label>
          <div class="col-sm-2">
            <input id="f_collection" class="form-control" type="number" v-model="model.f_collection"
            v-validate:f_collection='{  required: true, dctest: [ model.f_totalcost, ">=" ] }'
             v-scale = "[model.f_collection, 2]">
            <span v-if="$v.f_collection.dctest && model.f_pregas != '' && model.f_preamount != '' "
            style="color:red ">收款不能小于应收金额</span>
          </div>
        </div>
      </div>
      <div class="row" style="margin-top:10px;" v-if="cal">
        <div class="col-sm-4 col-sm-offset-7">
          <strong>计算公式: {{calculatedetail}}</strong>
        </div>
      </div>
    </form>
    <print-bill :show="print" v-ref:printbill v-on:toggle="close"></print-bill>
    <div style="text-align:right;margin-top:30px;margin-right:50px;">
      <button class="btn btn-success" @click="confirm()"  :disabled='!$v.valid'>确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
      <button class="btn btn-default" @click="clean()" style="width:80px;margin-left:20px;">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
    </div>
    </validator>
  </div>
</template>
<script>
/**
*综合业务
*超用收费组件
*/
import AppData from '../../../../../stores/AppData'

export default {
  title: '超用收费',
  data () {
    return {
      total: 0,
      model: {
        f_pregas: 0,
        f_preamount: 0,
        f_totalcost: 0,
        f_collection: 0,
        f_balance: '',
        f_curbalance: '',
        f_payment: '现金缴费'
      },
      cal: false,
      calculatedetail: ''
    }
  },
  props: ['row'],
  ready () {
    this.model = Object.assign({}, this.model, this.row)
    let params = {
      items: '*',
      tablename: 't_overuse',
      condition: 'f_user_id=' + "'" + this.row.f_user_id + "'" + 'and f_whether_pay = ' + "'" + '否' + "'" + 'and f_overuse_state = ' + "'" + '有效' + "'",
      orderitem: 'f_operate_date desc'
    }
    let sql = 'singleTable_OrderBy'
    this.$SqlService.singleValue(sql, params).then((res) => {
      // this.model.f_pregas = res.data
      this.model.f_pregas = res.data.f_overuseamount
      this.model.f_preamount = res.data.f_overusefee
      this.model.f_totalcost = this.model.f_balance > res.data.f_overusefee ? 0 : res.data.f_overusefee - this.model.f_balance
      this.model.f_collection = this.model.f_totalcost
      this.model.over_id = res.data.id
    }).catch((error) => {
      this.$dispatch('error', '超用收费', this.model, error)
    })
  },
  watch: {
    'row' (val) {
      this.model = Object.assign({}, this.model, val)
    }
  },
  methods: {
    confirm () {
      this.model.f_curbalance = this.curbalance
      this.$ChangeMeterService.overCharge(this.model, this.row).then((res) => {
        this.$dispatch('success', '超用收费', this.model, res)
      }).catch((error) => {
        this.$dispatch('error', '超用收费', this.model, error)
      })
    },
    clean () {
      this.$dispatch('clean', this.row)
    },
    overusegas () {
      if (this.model.f_pregas) {
        this.$CommonService.gasCalculate(this.model, this.model.f_pregas).then((res) => {
          // let l = res.da
          this.model.f_preamount = res.data.chargenum
          this.model.f_totalcost = this.model.f_balance > res.data.chargenum ? 0 : res.data.chargenum - this.model.f_balance
          // this.model.f_totalcost = this.model.f_preamount
          this.model.f_collection = this.model.f_totalcost
          this.cal = true
          let str = ''
          res.data.chargeprice.forEach((item) => {
            str = str + item.f_price + ' x ' + item.f_gas + '+'
          })
          str = str.slice(0, str.length - 1)
          this.calculatedetail = str
        }).catch((error) => {
          this.$dispatch('error', '发卡售气', this.model, error)
        })
      }
    },
    close () {
      this.showprint = false
      this.print = false
      this.clean()
    }
  },
  computed: {
    'curbalance' () {
      if (this.model.f_preamount !== '' && this.model.f_preamount !== '') {
        if (this.model.f_preamount < this.model.f_balance) {
          return this.model.f_balance - this.model.f_preamount + this.model.f_collection - this.model.f_totalcost
        } else {
          return this.model.f_collection - this.model.f_totalcost
        }
      } else {
        return 0
      }
    },
    paytype () {
      return AppData.getParam('付款方式')
    }
  }
}
</script>

<style>
</style>
